<template>
  <div>
    <h2>dialog-插槽</h2>
    <my-dialog>
      <template #header>
        <h3>温馨提示</h3>
      </template>
      
      <template v-slot:default>
        用户：<input type="text"> <br>
        密码：<input type="password">
      </template>

      <template v-slot:footer>
        <button>登录</button>
        <button>注册</button>
      </template>
    </my-dialog>
    <!-- 第二个 -->
    <!-- <my-dialog>
      <textarea name="" id="" cols="20" rows="5"></textarea>
    </my-dialog> -->
  </div>
</template>

<script>
// 插槽的分类 
//   1.默认插槽 不带有name属性的slot  => 默认名字就叫default
//   <slot></slot> 等效于 ==> <slot name="default"></slot>

//   2.具名插槽 带有name属性的slot， 可以实现内容的定向分发
//   2.1 带有插槽的组件中，在slot标签上写上name属性，来决定放哪块内容（双孔还是三孔的插座）
        // <slot name="header"></slot>
//   2.2 组件使用时，template + v-slot:name 来使用 
      // <template v-slot:header>
      //   <h3>温馨提示</h3>
      // </template>

  // 3. 具名插槽   v-slot:name 使用的时候，可以简写 =>  #name
  // <template #header>
  //   <h3>温馨提示</h3>
  // </template>
      

// 注意：
// 1. template标签不会影响任何结构内容，它只是一个包裹的容器，将来会被替换掉
// 2. v-slot只能用于template标签 

// import MyDialog from './components/MyDialog.vue';
import MyDialog from './components/02 具名插槽MyDialog.vue';
export default {
  components:{
    MyDialog
  }
  // 1. 简单使用场景，如果只是父组件传数据到子组件  ==> props可以实现
  // 2. 如果要定制化组件的内部某些结构 ==> 使用slot插槽 ，用于结构的内容分发
}
</script>

<style>

</style>